<!DOCTYPE html>
<html lang="en">
<head>
  <meta charSet="utf-8"/>
  <meta httpEquiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
  <meta name="renderer" content="webkit"/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
  <meta name="author" content=""/>
  <title>CRULSE</title>
  <link rel="stylesheet" type="text/css" href="./static/ASSETS/fonticons/fonts.css">
  <link rel="stylesheet" type="text/css" href="./static/css/normalize.min.css" >
  <link rel="stylesheet" type="text/css" href="./static/css/index.css" >
</head>
<body>
<header>
  <div class="wrapper">
    <div id="phone-menu" class="icon-box" >
      <span class="icon-navicon"></span>
    </div>
    <embed class="logo" src="./static/ASSETS/logo/logo.svg" type="image/svg+xml"/>
    <div id="avatar" class="avatar-box">
      <div class="avatar">
        <img src="https://avatars1.githubusercontent.com/u/28883104?v=4">
      </div>
      <span class="active icon icon-angle-down"></span>
      <span class=" icon icon-angle-up"></span>
    </div>
  </div>
  <div class="sign-box hide">
    <div class="item">
      <span class="icon icon-id-card"></span>
      Profile
    </div>
    <div class="item">
      <span class="icon icon-sign-in"></span>
      Sign Out
    </div>
  </div>
</header>
<div class="container ">
  <div class="content-wrapper ">
    <!--顶部-->
    <div class="top-wrapper">
      <ul class="clearfix">
        <li class="fl">
          <div class="top">Building</div>
          <div class="mid-wrapper">
            <div class="mid">
              <span class="icon-cog"></span>
            </div>
          </div>
          <div class="btm">3</div>
        </li>
        <li class="fl">
          <div class="top">Idle</div>
          <div class="mid-wrapper">
            <div class="mid">
              <span class="icon-coffee"></span>
            </div>
          </div>
          <div class="btm">5</div>
        </li>
        <li class="fl ">
          <div class="type-box">
            <div>
              <span class="tit">ALL</span>
              <span class="num">8</span>
            </div>
            <div>
              <span class="tit">PHYSIAL</span>
              <span class="num">4</span>
            </div>
            <div>
              <span class="tit">VIRTUAL</span>
              <span class="num">4</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--搜索-->
    <div class="search-bar">
      <div class="filter-wrapper">
        <div class="item active">All</div>
        <div class="item">Physical</div>
        <div class="item">Virtual</div>
      </div>
      <div class="search-wrapper">
        <div class="input-wrapper">
          <span class="icon-search"></span>
          <input>
        </div>
        <div class="icon-wrapper">
          <span class="icon-th-card"></span><span class="icon-th-list"></span>
        </div>
      </div>
    </div>
    <div class="btm-wrapper">
      <ul id="list">

      </ul>
    </div>
  </div>
</div>
<footer>
  &copy;Copyright 2017 ThoughtWorks
</footer>
<div id="slide-bar" class="slide-bar ">
  <ul class="list">
    <li>
      <span class="icon-dashboard"></span>
      DASHBOARD
    </li>
    <li>
      <span class="icon-sitemap"></span>
      AGENT
    </li>
    <li>
      <span class="icon-boat"></span>
      MY CRUISE
    </li>
    <li>
      <span class="icon-life-bouy"></span>
      HELP
    </li>
  </ul>
  <div class="history">
    <p class="title">History</p>
    <ul>
      <li>
        <a href="javascript:;" title="bjstdmngbgr02/Acceptance_test">
          bjstdmngbgr02/Acceptance_test
        </a>
      </li>
      <li>
        <a href="javascript:;" title="bjstdmngbgr02/Acceptance_test">
          bjstdmngbgr02/Acceptance_test
        </a>
      </li>
      <li>
        <a href="javascript:;" title="bjstdmngbgr02/Acceptance_test">
          bjstdmngbgr02/Acceptance_test
        </a>
      </li>
      <li>
        <a href="javascript:;" title="bjstdmngbgr02/Acceptance_test">
          bjstdmngbgr02/Acceptance_test
        </a>
      </li>
    </ul>
  </div>
  <span class="icon-close"></span>
</div>
<div id="layer" class="layer hide">
  <div class="modal-box">
    <div class="modal">
      <div class="modal-content">
        <span class="icon-close"></span>
        <p class="input-title">Separate multiple resource name width commas</p>
        <input class="input" value="Ubuntu,Chrome" placeholder="请输入">
        <div class="btn-group">
          <div class="add">Add Resource</div>
          <div class="cancel">Cancel</div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="./src/bundle.js"></script>
</body>
</html>
